<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>工序类型API测试</span>
        </div>
      </template>
      
      <div class="button-container">
        <el-button type="primary" @click="testListProcessTypeTree">获取工序类型树</el-button>
        <el-button type="success" @click="testGetProcessType">获取工序类型详情</el-button>
        <el-button type="warning" @click="testAddProcessType">添加工序类型</el-button>
        <el-button type="info" @click="testUpdateProcessType">更新工序类型</el-button>
        <el-button type="danger" @click="testDeleteProcessType">删除工序类型</el-button>
      </div>

      <div class="result-container">
        <h3>测试结果</h3>
        <el-input
          type="textarea"
          :rows="15"
          placeholder="API响应将显示在这里"
          v-model="apiResult"
          readonly
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { listProcessType, getProcessType, delProcessType, addProcessType, updateProcessType, listProcessTypeTree } from "@/api/qep/processType";

export default {
  name: "ProcessTypeApiTest",
  data() {
    return {
      apiResult: '',
      testTypeId: null
    };
  },
  methods: {
    logResult(title, response) {
      this.apiResult = `${title}\n${JSON.stringify(response, null, 2)}\n\n${this.apiResult}`;
      console.log(`${title}:`, response);
    },
    
    logError(title, error) {
      this.apiResult = `${title} - 错误\n${error.message || JSON.stringify(error)}\n\n${this.apiResult}`;
      console.error(`${title} - 错误:`, error);
    },
    
    async testListProcessTypeTree() {
      try {
        this.apiResult = "正在获取工序类型树...\n\n" + this.apiResult;
        console.log("正在获取工序类型树...");
        
        const response = await listProcessTypeTree();
        this.logResult("获取工序类型树", response);
        
        // 保存第一个工序类型的ID用于后续测试
        if (response.data && response.data.length > 0) {
          this.testTypeId = response.data[0].id;
        }
      } catch (error) {
        this.logError("获取工序类型树", error);
      }
    },
    
    async testGetProcessType() {
      if (!this.testTypeId) {
        this.apiResult = "请先获取工序类型树以获取工序类型ID\n\n" + this.apiResult;
        return;
      }
      
      try {
        this.apiResult = `正在获取工序类型详情 (ID: ${this.testTypeId})...\n\n` + this.apiResult;
        
        const response = await getProcessType(this.testTypeId);
        this.logResult(`获取工序类型详情 (ID: ${this.testTypeId})`, response);
      } catch (error) {
        this.logError("获取工序类型详情", error);
      }
    },
    
    async testAddProcessType() {
      try {
        const testType = {
          name: "测试工序类型-" + new Date().toLocaleTimeString(),
          parentId: 0, // 顶级节点
          orderNum: Math.floor(Math.random() * 1000)
        };
        
        this.apiResult = `正在添加工序类型 (${testType.name})...\n\n` + this.apiResult;
        
        const response = await addProcessType(testType);
        this.logResult("添加工序类型", response);
        
        // 刷新列表以查看新添加的工序类型
        await this.testListProcessTypeTree();
      } catch (error) {
        this.logError("添加工序类型", error);
      }
    },
    
    async testUpdateProcessType() {
      if (!this.testTypeId) {
        this.apiResult = "请先获取工序类型树以获取工序类型ID\n\n" + this.apiResult;
        return;
      }
      
      try {
        // 先获取当前工序类型信息
        const currentType = await getProcessType(this.testTypeId);
        const typeData = currentType.data;
        
        // 更新名称字段
        typeData.name = "已更新-" + new Date().toLocaleTimeString();
        
        this.apiResult = `正在更新工序类型 (ID: ${this.testTypeId})...\n\n` + this.apiResult;
        
        const response = await updateProcessType(typeData);
        this.logResult(`更新工序类型 (ID: ${this.testTypeId})`, response);
        
        // 刷新详情以验证更新
        await this.testGetProcessType();
      } catch (error) {
        this.logError("更新工序类型", error);
      }
    },
    
    async testDeleteProcessType() {
      if (!this.testTypeId) {
        this.apiResult = "请先获取工序类型树以获取工序类型ID\n\n" + this.apiResult;
        return;
      }
      
      try {
        this.apiResult = `正在删除工序类型 (ID: ${this.testTypeId})...\n\n` + this.apiResult;
        
        const response = await delProcessType(this.testTypeId);
        this.logResult(`删除工序类型 (ID: ${this.testTypeId})`, response);
        this.testTypeId = null;
        
        // 刷新列表以验证删除
        await this.testListProcessTypeTree();
      } catch (error) {
        this.logError("删除工序类型", error);
      }
    }
  }
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-container {
  margin-bottom: 20px;
}

.button-container .el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.result-container {
  margin-top: 20px;
}
</style> 